<template>
	<view class="container">
		<view class="navbar">
			<view class="navbar-title">老年人中医药健康管理服务记录表</view>
		</view>
		<view class="item-mint">请根据近一年的体验和感觉，回答以下问题。</view>
		<view v-for="(item, index) in items" :key="index" class="question-container">
			<view class="question-header">
				<text class="question-text">{{ item.text }}</text>
			</view>

			<view class="options-container">
				<radio-group @change="onRadioChange(index, $event)" class="radio-group">
					<label v-for="(option, idx) in getOptionsForItem(item)" :key="idx" class="radio-label">
						<radio :value="option.value" :name="`radio${index}`" class="radio-button" />
						<span class="option-text">{{ option.text }}</span>
					</label>
				</radio-group>
				<!-- <text  class="selected-value">选中的值: {{ selectedValues[index] || '无' }}</text> -->
			</view>
		</view>
		<button @click="submitForm" class="submit-button">提交</button>
		<view v-if="showError" class="error-message">请填写所有问题！
			<view v-for="id in missingIds" :key="id">未填的题目:{{ id }}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				items: [{
						id: 1,
						text: '(1)您精力充沛吗?(指精神头足，乐于做事)'
					},
					{
						id: 2,
						text: '(2)您容易疲乏吗?(指体力如何，是否稍微活动一下或做一点家务劳动就感到累)'
					},
					{
						id: 3,
						text: '(3)您容易气短，呼吸短促，接不上气吗?'
					},
					{
						id: 4,
						text: '(4)您说话声音低弱无力吗?(指说话没有力气)'
					},
					{
						id: 5,
						text: '(5)您感到闷问不乐、情绪低沉吗?(指心情不愉快，情绪低落)'
					},
					{
						id: 6,
						text: '(6)您容易精神紧张、焦虑不安吗?(指遇事是否心情紧张)'
					},
					{
						id: 7,
						text: '(7)您因为生活状态改变而感到孤独、失落吗?'
					},
					{
						id: 8,
						text: '(8)您容易感到害怕或受到惊吓吗?'
					},
					{
						id: 9,
						text: '(9)您感到身体超重不轻松吗?(感觉身体沉重)[BMI指数=体重(kg)/身高²(m)]'
					},
					{
						id: 10,
						text: '(10)您眼睛干涩吗?'
					},
					{
						id: 11,
						text: '(11)您手脚发凉吗?(不包含国周国温度低或穿的少导致的手脚发冷)'
					},
					{
						id: 12,
						text: '(12)您胃脘部、背部或腰膝部怕冷吗?(指上腹部、背部、腰部或膝关节等，有一处或多处怕冷)'
					},
					{
						id: 13,
						text: '(13)您比一般人耐受不了寒冷吗?(指比别人容易害怕冬天或是夏天的冷空调、电扇等)'
					},
					{
						id: 14,
						text: '(14)您容易患感冒吗?(指每年感冒的次数)'
					},
					{
						id: 15,
						text: '(15)您没有感冒时也会鼻塞、流鼻涕吗?'
					},
					{
						id: 16,
						text: '(16)您有口粘口腻，或睡眠打鼾吗?'
					},
					{
						id: 17,
						text: '(17)您容易过敏(对药物、食物、气味、花粉或在季节交替、气侯变化时)吗?'
					},
					{
						id: 18,
						text: '(18)您的皮肤容易起尊麻疹吗?(包括风团、风疹块、风疙痞)'
					},
					{
						id: 19,
						text: '(19)您的皮肤在不知不觉中会出现青紫瘀斑、皮下出血吗?(指皮肤在没有外伤的情况下出现青一块紫一块的情况)'
					},
					{
						id: 20,
						text: '(20)您的皮肤一抓就红，并出现抓痕吗?(指被指甲或钝物划过后皮肤的反应)'
					},
					{
						id: 21,
						text: '(21)您皮肤或口唇干吗?'
					},
					{
						id: 22,
						text: '(22)您有肢体麻木或固定部位疼病的感觉吗?'
					},
					{
						id: 23,
						text: '(23)您面部或鼻部有油腻感或者油亮发光吗?(指脸上或鼻子)'
					},
					{
						id: 24,
						text: '(24)您面色或目眶晦路，或出现褐色斑块/斑点吗?'
					},
					{
						id: 25,
						text: '(25)您有皮肤湿疹、疮疖吗?'
					},
					{
						id: 26,
						text: '(26)您感到口干咽燥、总想喝水吗?'
					},
					{
						id: 27,
						text: '(27)您感到口苦或嘴里有异味吗?(指口苦或口臭)'
					},
					{
						id: 28,
						text: '(28)您腹部肥大吗?(指腹部脂肪肥厚)'
					},
					{
						id: 29,
						text: '(29)您吃(喝)凉的东西会感到不舒服或者怕吃(喝)凉的东西吗?(指不喜欢吃凉的食物，或吃了凉的食物后会不舒服)'
					},
					{
						id: 30,
						text: '(30)您有大便黏滞不爽、解不尽的感觉吗?(大便容易粘在马桶或便坑壁上)'
					},
					{
						id: 31,
						text: '(31)您容易大便干燥吗?'
					},
					{
						id: 32,
						text: '(32)您舌苔厚腻或有舌苔厚厚的感觉吗?(如果自我感觉不清楚可由调查员观察后填写)'
					},
					{
						id: 33,
						text: '(33)您舌下静脉瘀紫或增粗吗?(可由调查员辅助观察后填写)',
						model: 'aa'
					},
				],

				options: [{
						text: '没有(根本不/从来没有)',
						value: '1'
					},
					{
						text: '很少（有一点/偶尔）',
						value: '2'
					},
					{
						text: '经常（有些/少数时间）',
						value: '3'
					},
					{
						text: '相当多/多数时间',
						value: '4'
					},
					{
						text: '总是（非常/每天）',
						value: '5'
					},
				],
				bmiOptions: [{
						text: '(BMI<24)',
						value: '1'
					},
					{
						text: '(24≤BMI<25)',
						value: '2'
					},
					{
						text: '(25≤BMI<26)',
						value: '3'
					},
					{
						text: '(26≤BMI<28)',
						value: '4'
					},
					{
						text: '(BMI≥28)',
						value: '5'
					}
				],
				bmiOptions1: [{
						text: '一年 < 2次',
						value: '1'
					},
					{
						text: '一年感冒2-4次',
						value: '2'
					},
					{
						text: '一年感冒5-6次',
						value: '3'
					},
					{
						text: '一年8次以上',
						value: '4'
					},
					{
						text: '几乎每月',
						value: '5'
					}
				],
				bmiOptions2: [{
						text: '从来没有',
						value: '1'
					},
					{
						text: '一年1、2次',
						value: '2'
					},
					{
						text: '一年3、4次',
						value: '3'
					},
					{
						text: '一年5、6次',
						value: '4'
					},
					{
						text: '每次遇到上述原因都过救',
						value: '5'
					}
				],
				bmiOptions3: [{
						text: '(腹围<80cm,相当于2.4尺)',
						value: '1'
					},
					{
						text: '(腹围80-85cm,2.4-2.55尺 )',
						value: '2'
					},
					{
						text: '(腹围86-90cm,2.56-2.7尺 )',
						value: '3'
					},
					{
						text: '(腹围1-105cm,2.71-3.15尺)',
						value: '4'
					},
					{
						text: '(腹围>105cm或3.15尺 )',
						value: '5'
					}
				],
				selectedValues: new Array(33).fill(null),
				showError: false, // 用于显示错误消息
				missingIds: [] // 用于存储未填的题目 ID

			};
		},
		
		onLoad() {
			// uni.navigateTo({
			// 	url: '/pages/test/index',
			// 	animationType: 'none'
			// })
			
			
		},
		
		
		methods: {

			onRadioChange(index, e) {
				const newValue = e.detail.value;
				this.selectedValues[index] = {
					Id: this.items[index].id,
					fraction: newValue
				};
			},
			getOptionsForItem(item) {
				if (item.text.includes('BMI指数')) {
					return this.bmiOptions.slice(0, 5);
				} else if (item.text.includes('容易患感冒')) {
					return this.bmiOptions1.slice(0, 5);
				} else if (item.text.includes('容易过敏')) {
					return this.bmiOptions2.slice(0, 5);
				} else if (item.text.includes('腹部肥大')) {
					return this.bmiOptions3.slice(0, 5);
				} else {
					return this.options.slice(0, 5);
				}
			},
			// 提交表单时
			submitForm() {
				// 用于存储未填的题目 ID
				const missingIds = [];

				this.selectedValues.forEach((value, index) => {
					if (value === null) {
						missingIds.push(this.items[index].id);
					}
				});

				if (missingIds.length > 0) {
					// console.log('未填的题目 ID:', missingIds);
					this.missingIds = missingIds;
					this.showError = true;
					return;
				}

				//转换为 JSON 字符串
				const selectedValuesJson = JSON.stringify(this.selectedValues);
				uni.setStorageSync('selectedValues', selectedValuesJson)


				uni.reLaunch({
					url: '/pages/finish/finish',
				});

			},
			mounted() {
				// console.log('Initial selectedValues:', this.selectedValues);
			},


		}
	};
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f9f9f9;
		border-radius: 8px;
	}

	.question-container {
		margin-bottom: 20px;
		border: 1px solid #ddd;
		border-radius: 8px;
	}

	.question-header {
		padding: 10px;
		background-color: #eef1f6;
		border-bottom: 1px solid #ddd;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.question-text {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.item-mint {
		font-size: 14px;
		font-weight: bold;
		color: #333;
		/* padding-top: 50px; */
	}

	.item-fount {
		font-size: 14px;
		font-weight: bold;
		color: #333;

	}

	.options-container {
		padding: 10px;
		background-color: #fff;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	.radio-group {
		margin-bottom: 10px;
	}

	.radio-label {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.radio-button {
		margin-right: 10px;
	}

	.option-text {
		font-size: 14px;
		color: #555;
	}

	.selected-value {
		font-size: 14px;
		color: #777;
	}

	.error-message {
		margin-top: 10px;
		color: red;
		text-align: center;
	}

	.navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		background-color: #007bff;
		color: white;
		font-size: 18px;
		font-weight: bold;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		position: fixed;
		/* 固定位置 */
		top: 0;
		/* 位于顶部 */
		left: 0;
		/* 位于左侧 */
		right: 0;
		/* 位于右侧 */
		z-index: 1000;
		/* 确保导航栏在内容之上 */
	}

	.navbar-title {
		margin: 0;
	}

	view {
		margin-bottom: 20px;
	}

	text {
		font-size: 16px;
		margin-bottom: 10px;
	}

	label {
		display: block;
		margin-bottom: 5px;
	}
</style>